{% load i18n vueAdmin_sets %}

<script type="text/x-template" id="suit-header-logo">
  <div :style="logoWrapperStyle">
    <a href="{% url 'admin:index' %}" style="display: inherit;">
      <img v-show="collapsed" :style="logoImgStyle" :src="src.mini.src" :alt="alt" />
    </a>
    <a href="{% url 'admin:index' %}" style="display: inherit;">
      <img v-show="!collapsed" :style="logoImgStyle" :src="src.full.src" :alt="alt" />
    </a>
  </div>
</script>

<script type="application/javascript">
  Vue.component('suit-header-logo', {
    delimiters: ['<%', '%>'],
    template: '#suit-header-logo',
    data: function () {
      const logo = JSON.parse(`{% vue_logo %}`);
      return {
        width: '200px',
        src: logo,
        alt: logo.alt,
        img: '',
      }
    },
    watch: {
      collapsed: function (val) {
        this.width = val ? '80px' : '200px';
      },
    },
    computed: {
      ...Vuex.mapGetters('app', {
        collapsed: 'collapsed'
      }),
      logoWrapperStyle: function () {
        return {
          width: this.width,
          height: '32px',
          margin: '16px auto',
          float: 'left'
        }
      },
      logoImgStyle: function () {
        return {
          width: this.width,
          height: '32px',
          display: 'inherit',
          padding: '0 24px'
        }
      }
    },
    created: function () {
      this.width = this.collapsed ? '80px' : '200px';
      this.alt = `{% trans 'Home' %}`;
    }
  })
</script>